<template>
  <div>
    <el-card class="search-card">
      <BasicForm
        ref="formData"
        actionPosition="start"
        btnBarStyle="padding-left: 10px"
        :hasQueryPermission="false"
        :isScalingBtn="false"
        :formColumns="formItemList"
        :dataSource="formData"
        :handleSearchForm="handleQueryForm"
        @getFormData="getFormData"
      />
    </el-card>
    <el-card class="table-card">
      <basic-table
        :showActionCol="false"
        :showSelectCol="false"
        :dataSource="tableInfo.list"
        :columns="tableInfo.columns"
        :loading="tableInfo.loading"
        :pageSizes="pageSizes"
        :pagination="pagination"
        :tableHeight="480"
        @pageChange="handlePageChange"
        @pageSizeChange="handlePageSizeChange"
      >
        <el-row slot="content_context">
          <el-button type="primary" size="mini" @click="handleAdd">新增</el-button>
        </el-row>
      </basic-table>
    </el-card>
    <AddPolyphoneDialog
      :visible.sync="dialogVisible"
      @getResult="getBatchAddResult"
    />
  </div>
</template>
<script>
import BasicForm from '@/components/BasicForm';
import BasicTable from '@/components/BasicTable';
import AddPolyphoneDialog from './components/AddPolyphoneDialog';
import basePage from '@/mixins/commodity/basePage';
import { getPolyphoneManageListService } from '@/api/basics/aliasManage/polyphoneManage';

export default {
  mixins: [basePage],
  components: {
    BasicForm,
    BasicTable,
    AddPolyphoneDialog
  },
  data () {
    return {
      formItemList: [{ label: '多音字', prop: 'polyphone', type: 'input' }],
      formData: { polyphone: '' },
      tableInfo: {
        list: [],
        columns: [
          { title: '多音字', key: 'polyphone' },
          { title: '默认字母', key: 'defaultPinyin' },
          { title: '添加时间', key: 'createOpeTime' },
          { title: '添加人', key: 'createOperName' },
          { title: '添加部门', key: 'orgName' }
        ],
        loading: false
      },
      dialogVisible: false
    }
  },
  methods: {
    async getTableData () {
      const data = { ...this.formData, ...this.paginationParams };
      const loadingFn = state => { this.tableInfo.loading = state };
      const retData = await getPolyphoneManageListService(data, loadingFn);
      if (retData) {
        this.tableInfo.list = retData.results;
        this.pagination.totalNum = retData.totalNum;
      }
    },
    handleAdd () {
      this.dialogVisible = true;
    },
    getBatchAddResult (isSuccessed) {
      if (isSuccessed) {
        this.getTableData();
      }
    }
  }
}
</script>
